<template>
  <div class="teamSetup">
    <el-form
      :inline="true"
      :model="queryDate"
      size="medium"
      label-width="100px"
    >
      <el-form-item>
        <el-select
          v-model="listQuery.categoryId"
          filterable
          clearable
          placeholder="产品线"
          @focus="getCategoryList"
          :loading="categoryLoading"
        >
          <el-option
            v-for="item in categoryList"
            :key="item.categoryId"
            :value="item.categoryId"
            :label="item.categoryName"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="listQuery.chargeUserIds"
          placeholder="业务员"
          @focus="getSalesmanList"
          filterable
          clearable
        >
          <el-option
            v-for="item in salesMemberList"
            :key="item.userId"
            :label="item.userName"
            :value="item.userId"
            :loading="salesmanLoading"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="medium" @click="seachTeam">
          查询
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 数据列表 -->
    <div class="teamLines-container">
      <vxe-grid
        ref="xGrid"
        v-bind="gridOptions"
        size="mini"
        :loading="listLoading"
      >
        <template #num1_default="{ row }">
          <el-link
            @click="toDetail(row)"
            type="primary"
            style="font-size: 12px"
            >{{ row.orderSn }}</el-link
          >
        </template>
        <template #num2_default="{ row }">
          <span> {{ row.isEnable | filterEnable }} </span>
        </template>

        <template #num3_default="{ row }">
          <el-button
            style="margin-right: 10px"
            type="text"
            size="small"
            @click="editTeamLine(row)"
            >修改</el-button
          >
          <!-- <el-button
            style="margin-right: 10px"
            type="text"
            size="small"
            @click="delMember(row)"
            >删除</el-button
          > -->
        </template>
      </vxe-grid>
    </div>
    <!-- 编辑产品线 -->
    <editTeamSetup
      ref="editTeamSetup"
      @update="getGoodsLineList"
    ></editTeamSetup>
  </div>
</template>
<script>
import editTeamSetup from "./components/editTeamSetup.vue";
import {
  getGoodsLineListAPI,
  delGoodsLineAPI,
  goodsSortList,
} from "@/api/allInLine/goods.js";
import { salesmanList } from "@/api/allInLine/inquiry.js";
import {getOrderUsersList} from '@/api/partner'
const defaultListQuery = {
  categoryId: "",
  chargeUserIds: "",
};
export default {
  name: "teamSetup",
  data() {
    return {
      // 是否加载中
      listLoading: false,
      queryDate: {},
      // 产品线详情
      teamLineDetail: {},
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      // 产品线列表
      categoryList: [],
      categoryLoading: false,
      // 业务员列表
      salesMemberList: [],
      salesmanLoading: false,
      gridOptions: {
        loading: this.listLoading,
        border: true,
        id: "teamSetup",
        align: "center",
        autoResize: true,
        width: 1200,
        height:600,
        size: "mini",
        rowConfig: {
          keyField: "glId",
          isHover: true,
        },
        columnConfig: {
          resizable: true,
        },
        customConfig: {
          storage: true,
        },
        checkboxConfig: {
          reserve: true,
        },
        toolbarConfig: {
          zoom: true,
          custom: true,
        },
        columns: [
          {
            field: "categoryName",
            title: "产品线",
            width: 200,
          },
          {
            field: "chargeUserNames",
            title: "人员",
            width: 400,
          },
          {
            field: "categoryMinPrice",
            title: "参考最低价(元/吨)",
            width: 180,
          },
          {
            field: "categoryMaxPrice",
            title: "参考最高价(元/吨)",
            width: 180,
          },
          {
            field: "",
            title: "操作",
            width: 200,
            fixed: "right",
            slots: {
              // 使用插槽模板渲染
              default: "num3_default",
            },
          },
        ],
        data: [{}],
      },
    };
  },
  computed: {},
  components: {
    // addTeamSetup,
    editTeamSetup,
  },
  created() {
    this.getGoodsLineList();
  },
  filters: {},
  methods: {
    // 获取产品线列表
    async getCategoryList() {
      this.categoryLoading = true;
      const res = await goodsSortList();
      this.categoryLoading = false;
      this.categoryList = res;
    },
    // 获取产品线业务员
    async getSalesmanList() {
      this.salesmanLoading = true;
      const res = await getOrderUsersList( );
      this.salesMemberList = res;
      this.salesmanLoading = false;
    },
    // 查询
    seachTeam() {
      this.getGoodsLineList();
    },
    //获取产品线团队列表
    async getGoodsLineList() {
      this.listLoading = true;
      const res = await getGoodsLineListAPI(this.listQuery);
      this.listLoading = false;
      this.gridOptions.data = res;
    },

    // 编辑产品线
    editTeamLine(row) {
      this.$refs.editTeamSetup.showPop(row)
    },
    // 删除产品线
    // delMember(row) {
    //   this.$confirm("确定删除该产品线?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {
    //       delGoodsLineAPI({ glId: row.glId }).then(() => {
    //         this.getGoodsLineList();
    //         this.$message({
    //           type: "success",
    //           message: "删除成功!",
    //         });
    //       });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消删除",
    //       });
    //     });
    // },
  },
};
</script>

<style  lang="scss">
.teamSetup {
  padding: 30px 0 0 30px;
}
.teamLines-container {
  max-width: 1160px;
}
</style>
